<!--
 * @Description: 
 * @version: 
 * @Author: 171
 * @Date: 2022-09-01 16:40:36
 * @LastEditors: 171
 * @LastEditTime: 2022-09-16 23:37:33
-->
<script setup lang='ts'>

  import { storeToRefs } from 'pinia'
  import useStore from '../../stores'
  const { listState } = useStore()
  // 使用storeToRefs可以保证解构出来的数据也是响应式的
  const { items } = storeToRefs(listState)
    

</script>

<template>

  <div class="my-container">
    <table border="1px" class="table" cellspacing="0">
      <thead>
        <tr>
          <th>地区</th>
          <th>新增确诊</th>
          <th>累计确诊</th>
          <th>治愈</th>
          <th>死亡</th>
        </tr>
      </thead>
      <transition-group tag="tbody" enter-active-class="animate__animated animate__zoomIn">
        <tr v-for="item in items" :key="(item as any).key">
          <td align="center">{{item.name}}</td>
          <td align="center">{{item.today.confirm}}</td>
          <td align="center">{{item.total.confirm}}</td>
          <td align="center">{{item.total.heal}}</td>
          <td align="center">{{item.total.dead}}</td>
        </tr>
      </transition-group>
    </table> 
  </div>

</template>

<style scoped lang='less'>
  .my-container{
    width: 400px;
    overflow-y: auto;
    .table{
      width: 400px;
      background-color: #212028;
      color: #fff;
      tr{
        th{
          padding: 5px;
          white-space: nowrap;
        }
        td{
          padding: 5px 10px;
          width: 100px;
          white-space: nowrap;
        }
      }
    }
  }
</style>